<template>
  <el-form :model="formData" :rules="formRules" label-width="74px" ref="formRef" :disabled="pageType == 'look'">
    <el-form-item label="红包类型">
      <el-radio-group v-model="formData.red_type"> <el-radio :label="1">普通红包</el-radio> <el-radio :label="2">拼手气红包</el-radio> </el-radio-group>
    </el-form-item>
    <div class="red_box">
      <el-form-item v-if="formData.red_type == 1" label="单个红包金额" label-width="110px" prop="amount">
        <el-input-number v-model="formData.amount" :min="0.3" :controls="false" :precision="2" placeholder="请输入红包金额" /><span>&ensp;元</span>
        <div class="inp_text">红包金额在0.3-200.00</div>
      </el-form-item>
      <el-form-item v-else label="单个红包金额" label-width="110px" prop="max_amount">
        <div style="display: flex">
          <el-form-item prop="min_amount" :show-message="false">
            <el-input-number v-model="formData.min_amount" :min="0.3" :controls="false" :precision="2" placeholder="￥0.30" />
          </el-form-item>
          <span> &ensp;—&ensp;</span>
          <el-input-number v-model="formData.max_amount" :min="0" :max="200" :controls="false" :precision="2" placeholder="￥200.00" />
          <span> &ensp;元 </span>
        </div>
        <div class="inp_text">红包金额在0.3-200.00</div>
      </el-form-item>
      <el-form-item label="红包个数" label-width="110px" prop="red_num"> <el-input-number v-model="formData.red_num" :min="1" :max="15000" :controls="false" :precision="0" placeholder="请输入红包个数" /><span>&ensp;个</span> </el-form-item>
      <el-form-item label="红包总金额" label-width="110px" prop="red_total">
        <div v-if="formData.red_type == 1" class="red_total">{{ formData.red_total }}元</div>
        <div v-else class="red_total"> {{ mul(formData.min_amount, formData.red_num) }}~{{ mul(formData.max_amount, formData.red_num) }}元</div>
      </el-form-item>
      <div class="red_desc">
        <p>使用红包之前请先前往【微信支付商户平台-商户平台-产品中心-付款到零钱-产品设置】中完成一下配置</p>
        <p>1、【同一用户单日收款次数】调整为10次</p>
        <p>2、【单日付款总额】调整为100000</p>
        <p>3、【同一用户收款额度】上限调整至200元</p>
        <p>4、红包个数限制：由微信支付平台限制，红包个数暂时限制为1.5万个</p>
      </div>
    </div>
  </el-form>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus'
  import { ref, computed, withDefaults, defineProps } from 'vue'
  import { mul } from '@/utils/math'
  interface Props {
    pageType: any
  }
  const props = withDefaults(defineProps<Props>(), {
    pageType: ''
  })
  const emit = defineEmits(['submit'])
  const formRef = ref<any>(null)
  const formData = ref({
    red_type: 1, //红包类型 1-普通红包 2-拼手气红包
    amount: 0.3, //单个红包金额(red_type=1必传)
    min_amount: 0.3, //最小红包金额(red_type=2必传)
    max_amount: 200, //最大红包金额(red_type=2必传)
    red_total: 0, //红包总金额
    red_num: 0 //红包个数
  })
  // 第一位数必须是1-9的数字正则
  const checkMin = (rule: any, value: any, callback: any) => {
    if (value >= 0.3 && value <= 200) {
      formData.value.min_amount = value
      callback()
    } else {
      formData.value.min_amount = 0.3
      ElMessage.error('请输入正确的金额')
      return callback(new Error('Please input the age'))
    }
  }
  formData.value.red_total = computed(() => {
    let num = formData.value.red_type == 1 ? formData.value.amount : formData.value.max_amount
    return mul(num, formData.value.red_num)
  })
  const amountValidator = (rule, value, callback) => {
    if (value < 0.3 || value > 200) {
      callback(new Error('金额在 0.3-200之间'))
    } else {
      callback()
    }
  }
  // 红包个数
  const redNumValidator = (rule, value, callback) => {
    if (value > 15000) {
      callback(new Error('红包个数最多输入15000'))
    } else {
      formData.value.red_num = Math.ceil(value)
      callback()
    }
  }
  // 最小红包金额
  const minAmountValidator = (rule, value, callback) => {
    if (value < 0.3) {
      ElMessage.error('最小金额不能小于0.3元')
      callback(new Error('最小金额不能小于0.3元'))
    }
    if (value > formData.value.max_amount && formData.value.max_amount) {
      ElMessage.error('最小金额不能大于最大金额')
      callback(new Error('最小金额不能大于最大金额'))
    } else {
      callback()
    }
  }
  // 最大红包金额
  const maxAmountValidator = (rule, value, callback) => {
    if (value > 200) {
      callback(new Error('最大金额不能大于200元'))
    }
    if (value < formData.value.min_amount) {
      callback(new Error('最大金额不能小于最小金额'))
    } else {
      callback()
    }
  }
  // 红包总金额
  const redTotalValidator = (rule, value, callback) => {
    if (value > 100000) {
      callback(new Error('红包总金额不得超过10万元'))
    } else {
      callback()
    }
  }
  const formRules = {
    amount: [
      { required: true, message: '请输入红包金额', trigger: 'blur' },
      { validator: amountValidator, trigger: 'blur' }
    ],
    min_amount: [
      { required: true, message: '请输入最小红包金额', trigger: 'blur' },
      { validator: minAmountValidator, trigger: 'blur' }
    ],
    max_amount: [
      { required: true, message: '请输入最大红包金额', trigger: 'blur' },
      { validator: maxAmountValidator, trigger: 'blur' }
    ],
    red_num: [
      { required: true, message: '请输入红包个数', trigger: 'blur' },
      { validator: redNumValidator, trigger: 'blur' }
    ],
    red_total: [{ validator: redTotalValidator, trigger: 'change' }],
    pca_code: [{ required: true, message: '请选择地区', trigger: 'change' }]
  }
  const onSubmit = async () => {
    if (!formRef.value) return
    await formRef.value.validate((valid: any, fields: any) => {
      if (valid) {
        emit('submit', 2, formData.value.red_num)
      } else {
        ElMessage.warning(Object.values(fields)[0][0].message)
      }
    })
  }
  defineExpose({
    onSubmit,
    formData
  })
</script>

<style lang="scss" scoped>
  .red_total {
    font-size: 14px;
    font-family: STHeitiSC-Medium, STHeitiSC;
    font-weight: 500;
    color: #ff6b00;
  }
  .red_box {
    width: 600px;
    margin-left: 76px;
    margin-bottom: 40px;
    padding: 24px;
    border: 1px solid #d9d9d9;
    .inp_text {
      padding-top: 10px;
      font-weight: 300;
      color: #969696;
      line-height: 12px;
    }
    :deep(.el-form-item):nth-child(n + 2) {
      margin-bottom: 12px;
    }
  }
  .red_desc {
    padding: 12px;
    margin-left: 24px;
    background: #fffaf9;
    border-radius: 4px;
    font-size: 12px;
    font-family: STHeitiSC-Light, STHeitiSC;
    font-weight: 300;
    color: #ff6b00;
    line-height: 20px;
  }
</style>
